<template>
	<view>
		<uni-popup ref="atmeal" type="bottom" zindex @maskClick="maskClick">
			<view class="comBotBx flex flex-direction" @click.stop="closeall">
				<!-- <view class="mtitle text-xll  prpo-w">
					请设置自动约餐
				</view> -->
				<!-- <uni-tooltip content="示例文字" placement="top">
					<view class="item">上</view>
				</uni-tooltip> -->
				<!-- <view class="list-times prpo-w marbootomXs">
					<view class="list-times-title flex align-center">
						起约时间
					</view>
					<view class="padding-time">
						<view class="invoice-li-tile" @click="showPop('propTime')">
							<picker class="padding-tb-sm piont" mode="date" :value="date" :start="startDate"
								:end="endDate" @change="bindDateChange" fields="day">
								<view class="uni-input flex justify-between"><text class="uni-input-text">开始日期：{{timeName}}</text><text class="lg text-gray cuIcon-right"></text></view>
							</picker>
						</view>
					</view>
				</view> -->
				<view class="text-xll text-bold padding">请设置配送时段</view>

				<view class='list-times padding-fb'>
					<!-- <view class="list-times-title flex align-center">
						约餐时间
					</view> -->
					<view>
						<!-- 日历暂7 -->
						<view v-if="0" class="mcalendbx" :class="{show:showCad,lg:filcalen}">
							<view class="mcdbox p_rlt">
								<view v-if="curMonth" class="mothbox text-sm text-c9">
									<view class=" flex justify-between align-center widthcur">
										<text class=" text-gray cuIcon-right rote" @click.stop="prevMonth"></text>
										<text class="curMonth_style"> {{curMonth}}月</text>
										<text class=" text-gray cuIcon-right" @click.stop="nextMonth"></text>
									</view>
								</view>
								<!-- <view v-for="index in 5" :key="index" class="mcitm"></view> -->
								<view class="flex justify-between week_container">
									<view class="" v-for="(week,index) in showWeeks" :key="index">
										<text>{{week}}</text>
									</view>
								</view>
								<view v-for="(item,index) in calenList" :key="index" class="mcitm text-center point">
									<!-- <view v-if="item.num" class="mcitm">
									:class="{ngreen:item.actnum!=3&&item.state == 2,grey:item.action&&item.actnum==3}"
										<view class="mcsub text-sm d_ib">  
											<text>{{item.num}}</text>
										</view>
										<view class="mcnum text-xs">
											{{item.name}}
										</view>
									</view> -->
									<view v-if="item.day" class="mcsub text-sm d_ib" :class="{ngreen:item.selected}"
										@click.stop="selectdate(item,index)">
										<text>{{item.day}}</text>
									</view>
									<view v-else class="mcsub text-sm d_ib"></view>
									<view v-if="item.day && item.selected"
										class="tiipsnum flex justify-center align-center">{{item.day}}</view>
								</view>
							</view>
						</view>
						<!-- 展示周 -->
						<view v-else class="mcalendbx week">
							<view class="flex align-center">
								<view v-for="(item,index) in weekList" :key="index" class="mcitm text-center point"
									@click.stop="selectdate(item,index)">
									<!-- act:weekClass==index -->
									<view class="mcsub wk text-sm d_ib"
										:class="{ngreen:item.selected,act:weekClass==index}">
										<text>{{item.week||item.day||''}}</text>
									</view>
									<view v-if="item && item.nums" class="tiipsnum flex justify-center align-center">
										{{item.nums||''}}
									</view>
									<view v-else class="mcsub text-sm d_ib"></view>
								</view>
							</view>

						</view>
					</view>
					<!-- <view class="text-lg padding-left-lg margin-top">
					剩余配送次数
				  </view> -->
					<!-- <view class="padding-left-lg margin-top-sm">
						<view class='zm_slc radius padding-left-lg padding-right text-c9'>
							<view class="flex-sub text-lg">
							21天
							</view>
							<text class="cuIcon-roundcheckfill text-xll" style="color:#D0CFCF"></text>
						</view>
					</view> -->
					<!-- <view class="text-lg padding-left-lgzdy padding-top">
						配送时间（每周）
					</view> -->
					<!-- <view class="flex align-center text-white padding-left-xs">
						<view v-for="(item,index) in mealtime1" :key="index" class="d_ib zm_itm"
							:class="{kx:!item.select}" @click="item.select=!item.select">
							{{item.name}}
						</view>
					</view> -->
					<!-- <view class="text-lg padding-left-lgzdy padding-top-lg">
						配送时间段
					</view> -->
					<!-- <view class="padding-left-lgzdy margin-top-sm flex align-center flex-wrap">
						<view v-for="(item,index) in mealtime2" :key="index" @click="tapMealTime(index)"
							class='zm_slc radius padding-lr text-c9'>
							<view class="flex-sub text-lg text-style">
								{{item.name}}
							</view>
							<text class=" text-xll"
								:class="timeClass==index?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
						</view>
					</view> -->
				</view>
				<view class="bg-white nav_time padding-lr prpo-w">
					<view class="flex justify-between flex-wrap">
						<!-- :class="index==tabClass||item.setedTime?'curHover':''" -->
						<view v-for="(item,index) in mealData" :key="index"
							class="cu-items text-lg point flex margin-bottom-sm flex-direction"
							@click.stop="selecyucan(item,index)" :data-id="index">
							<!-- <view class="rounded-bottom-triangle"></view> -->
							{{item.name}}
							<text class="margin-top-xs" v-if="item.setedTime">{{ item.setedTime}}</text>
							<view class="seleIcon">
								<view class="triangle"
									:class="(index==tabClass&&item.state)||item.setedTime?'seleBgActive':''">
								</view>
								<text class="checkmark"></text>
								<!-- <text v-if="index==tabClass" class="fcon-xuanzhong"></text> -->
							</view>
							<!-- <text class="fcon-a-dsanjiao" @click.stop="selecTab(item,index)"></text> -->
							<view class="yytips flex flex-direction" v-if="item.state">
								<scroll-view scroll-y="true" class="yyscrbx">
									<view class="yytips_li flex justify-between" v-for="(list,listIndex) in item.time"
										@click.stop="selecTips(list,item.time,item)" :key="listIndex">
										<text class="fongStyle">{{list.text}}</text>
										<text class=" text-xll"
											:class="list.flag?'cuIcon-roundcheckfill':'cuIcon-round'"></text>
										<!-- <text class="posi-check" :class="list.flag ? 'fcon-xuanzhong' : ''"></text> -->
									</view>
								</scroll-view>

							</view>
						</view>
					</view>
				</view>
				<view class="padding-left padding-top-xs text-c9 text-sm">
					自定义模式每天可设置不同的配送时段
				</view>
				<!-- <scroll-view scroll-y="true" class="bg-white nav_time padding-lr prpo-w marbittom">
					
				</scroll-view> -->


				<view class="padding-lr zdypadding flex justify-between flex-direction">
					<!-- <view class="zm_half" @click="close">
						我不需要自动
					</view> -->
					<!-- <view class="font_text">
						如需修改送餐时间或地址，请在送餐前2小时完成修改。
					</view> -->
					<view class="zm_half bg" @click="tapSure">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { showLoading, hideLoading, mnavTo, getNowDate } from '@/utils/helper';
	import mApi from "@/utils/mapi";
	import { getMealsWeeks } from "@/api/vmeitime-http/index.js";
	const props = defineProps({
		source: {
			type: String,
			default: '',
		}
	});

	const emit = defineEmits(["maskClick", "confirm"])
	const atmeal = ref()
	const tabClass = ref(0)//中餐晚餐
	const propTime = ref(null)
	const showCad = ref(true)//是否展开日历
	const date = ref('')
	const timeName = ref('')
	const calenList = ref<any>([]);//日历数据
	const weekList = ref<any>([]);//周数据
	const weekClass = ref(null);
	// let state = reactive({
	// 	calenList: [],
	// 	weekDays: []
	// })
	const mealData = ref<any>([
		// {
		// 	id: '1186',
		// 	name: '早餐',
		// 	state: false,
		// 	setedTime: '',
		// 	type: 'breakfast',
		// 	time: [
		// 		{
		// 			text: '6:30-7:00',
		// 			flag: false
		// 		},
		// 		{
		// 			text: '7:00-7:30',
		// 			flag: false
		// 		},
		// 		{
		// 			text: '7:30-8:30',
		// 			flag: false
		// 		}
		// 	]
		// },
		// {
		// 	id: '1187',
		// 	name: '午餐',
		// 	state: false,
		// 	setedTime: '',
		// 	type: 'lunch',
		// 	time: [
		// 		{
		// 			text: '11:30-12:30',
		// 			flag: true
		// 		},
		// 		{
		// 			text: '12:30-13:30',
		// 			flag: false
		// 		},
		// 		{
		// 			text: '13:00-14:00',
		// 			flag: false
		// 		}
		// 	]
		// },
		// {
		// 	id: '1188',
		// 	name: '晚餐',
		// 	state: false,
		// 	setedTime: '',
		// 	type: 'dinner',
		// 	time: [
		// 		{
		// 			text: '17:30-18:00',
		// 			flag: false
		// 		},
		// 		{
		// 			text: '18:00-19:00',
		// 			flag: false
		// 		},
		// 		{
		// 			text: '18:30-19:30',
		// 			flag: false
		// 		}
		// 	]
		// }
	])
	// 配送时间（每周）
	const mealtime1 = ref([
		{
			name: '一',
			time: '1',
			select: true
		},
		{
			name: '二',
			time: '1',
			select: true
		},
		{
			name: '三',
			time: '1',
			select: true
		},
		{
			name: '四',
			time: '1',
			select: true
		},
		{
			name: '五',
			time: '1',
			select: false
		},
		{
			name: '六',
			time: '1',
			select: false
		},
		{
			name: '七',
			time: '1',
			select: false
		}
	])
	// 配送时间段
	const mealtime2 = ref([
		{
			name: '11:30-12:30',
			time: '1',
			select: true
		},
		{
			name: '12:30-13:30',
			time: '1',
			select: false
		}

	])
	const timeClass = ref(0)
	// const tapMealTime = (index : any) => {
	// 	timeClass.value = index
	// 	console.log(index)
	// 	// if (item.select) {
	// 	// 	item.select = false
	// 	// 	return
	// 	// }
	// 	// mealtime2.value.forEach((citem) => {
	// 	// 	citem.select = false
	// 	// })
	// 	// item.select = !item.select
	// }
	const open = async (goodsId : any = '', tparam : any = '', source : any = '') => {
		console.log('open-pop', goodsId, tparam)
		if (!goodsId || !tparam) {
			return
		}
		// source=='creatMeal'&&
		if (weekList.value && weekList.value.length > 0 && mealData.value && mealData.value.length > 0) {
			let cindex = weekList.value.findIndex(citem=>citem.selected);
			cindex<0?cindex=0:'';
			selectdate(weekList.value[cindex],cindex);
			
			atmeal.value.open();
			return
		}
		let ndata : any = { goodsId: goodsId };
		props.source == 'appionted' ? ndata.fatherBillId = tparam : ndata.sxpTime = tparam;
		showLoading();
		let res = await getMealsWeeks(ndata, props.source);
		hideLoading();
		if (!res.result || !res.object) {
			mApi.msg(res.shortMessage || '网络繁忙，请稍后.')

		}
		let nres = res.object || [];
		let nindex = null;
		nres.forEach((item,index) => {
			let hasdf = false, rlist = item.rangeTime || [];
			item.rangeTime = initCanDuan(rlist)
			rlist.forEach(ritem => {
				let ntime = ritem.time || [];
				for (let i = 0; i < ntime.length; i++) {
					if (ntime[i] && ntime[i].flag) {
						hasdf = true;
						break;
					}
				}
			})
			item.selected = item.realDays && hasdf ? true : false;
			nindex===null&&item.selected?nindex = index:'';
			// console.log('inininini',item.realDays,hasdf,item)
		})
		weekClass.value = nindex||0;
		let rt = nres.length > 0 ? nres[weekClass.value].rangeTime || [] : [];
		mealData.value = rt;
		weekList.value = nres;
		console.log('initweek',nres)
		atmeal.value.open()
	}
	const initCanDuan = (list : any = []) => {
		if (list.length > 0) {
			list.forEach(item => {
				let index = item.time ? item.time.findIndex(citem => citem.flag) : -1;
				console.log('initCanDuan00', index)
				item.state = false;
				item.id = item.rangeType;
				item.setedTime = index >= 0 ? item.time[index].text : '';
				item.name = item.id == '1186' ? '早餐' : item.id == '1187' ? '午餐' : item.id == '1188' ? '晚餐' : '';
			})
		}
		console.log('initCanDuan', list)
		return list
	}

	//选泽约餐
	const selecyucan = (item : any, idnex : any) => {
		tabClass.value = idnex
		mealData.value.forEach((i : any) => {
			i.state = i === item ? !i.state : false; // 仅切换当前项的状态，其它项关闭
		})
	}
	// const selecTab = (item:any,index:any) => {
	//   tabClass.value = index
	//   mealData.value.forEach((i: any) => {
	//       if (i === item) {
	//         // 切换当前项的状态
	//         i.state = !i.state;
	//       } else {
	//         // 关闭其他项
	//         i.state = false;
	//       }
	//    });
	//   console.log('item.state-------------------',item.state)
	// }
	//选择约餐时间
	const selecTips = (list : any, data : any, fatherItem : any) => {
		console.log('selecTips', mealData.value)
		if (list.flag) {
			list.flag = false
			fatherItem.setedTime = "";
		} else {
			data.forEach((item : any) => {
				item.flag = false
			})
			list.flag = true
			fatherItem.setedTime = list.text; // 赋值为当前选中项的文本
		}
		checkSelect('change')

		setTimeout(() => {
			mealData.value.forEach((i : any) => {
				i.state = false;
			});
		}, 60);
	}
	const checkSelect = (source : any = '') => {
		let r = false, item = weekList.value[weekClass.value];
		let rt = item.rangeTime || [];
		r = rt.some(sitem => sitem.setedTime);
		if (source == 'change') {
			r && !item.selected ? item.selected = true : !r && item.selected ? item.selected = false : '';
		}
		return r;
	}
	const closeall = () => {
		mealData.value.forEach((item : any) => {
			item.state = false
		})
	}
	const rezData = ()=>{
		weekList.value = [];
		mealData.value = [];
		console.log('rezData',weekList.value,mealData.value)
	}
	const fillCalenList = (res : any = '') => {
		if (!res) {
			return;
		}
		let y : any = '', m : any = '', dayListItem = res || [];
		let fst = res[0] && res[0].sxp_date ? res[0].sxp_date.split('-') : '';
		if (fst) {
			y = fst[0] || '';
			m = fst[1] ? Number(fst[1]) : '';
		}
		//当前
		let year = y || (new Date().getFullYear());
		let month = m || (new Date().getMonth() + 1);

		// curMonth.value = month;
		// 总天数
		let date = new Date(year, month, 0);
		let days = date.getDate();
		// 第一天/最后一天星期几
		let whichFirstDay = new Date(year, curMonth.value - 1, 1).getDay();
		let whichLastDay = new Date(year, curMonth.value, 0).getDay();
		console.log('总天数-第一天-最后一天', days, whichFirstDay, whichLastDay);
		// 日历-获取默认展示列表
		// fillWeekList(dayListItem);
		for (let i = 1; i < whichFirstDay; i++) {
			dayListItem.unshift({ space: true, num: '' });
		}
		// rlClass.value = dindex>=0?dindex + whichFirstDay - 1:0;
		let nlastDay = whichLastDay == 0 ? 6 : 7 - (Number(whichLastDay) + 1);
		for (let i = 1; i < nlastDay; i++) {
			dayListItem.push({ space: true, num: '' });
		}
		console.log('dayListItem---', dayListItem);
		dayListItem.length > 35 ? (filcalen.value = true) : (filcalen.value = false);
		// calenList.value = dayListItem;
		// swiperList.value[curSwiperIndex.value] = dayListItem;
	}

	//切换日历
	// const curMonth = ref(null)
	const curMonth = ref(new Date().getMonth() + 1);
	const curYear = ref<any>();
	const filcalen = ref(false);
	const showWeeks = ['一', '二', '三', '四', '五', '六', '日'];
	// 汉字表示的一周中的每一天
	const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
	// 默认日历数据
	const initCalenList = (y : any = null, m : any = null) => {
		// 处理月份越界的情况
		if (m && m < 1) {
			m = 12;
			y--;
		} else if (m && m > 12) {
			m = 1;
			y++;
		}
		let year = y || (new Date().getFullYear());
		let month = m || (new Date().getMonth() + 1);
		// 获取指定年份和月份的最后一天
		let date = new Date(year, month, 0);
		let days = date.getDate(); // 当前月份的天数
		let whichFirstDay = new Date(year, month - 1, 1).getDay(); // 当前月份的第一天是星期几
		let whichLastDay = new Date(year, month - 1, days).getDay(); // 当前月份的最后一天是星期几

		// 获取当前日期
		// let today = new Date();
		// let currYear = today.getFullYear();
		// let currMonth = today.getMonth() + 1; // 月份是0-based
		// let currDay = today.getDate();
		let wk = whichFirstDay; // 当前月份第一天的星期数
		let dayListItem = []; // 存储日历信息的数组
		let selectedDays = 0; // 记录选中的天数
		// let startDate = new Date(today); // 选中的开始日期

		// 填充日历中的日期
		for (let i = 1; i <= days; i++) {
			wk = wk > 6 ? 0 : wk; // 星期数越界时重置为0

			// 创建当前日期的信息对象
			// let currentDate = new Date(year, month - 1, i);
			let isSelected = false;
			// let isSelected = currentDate >= startDate && selectedDays < 20; // 原有选中逻辑
			// if (currentDate.getFullYear() === currYear && currentDate.getMonth() + 1 === currMonth && currentDate.getDate() === currDay) {
			// 	// 如果是今天，则强制标记为选中
			// 	isSelected = true;
			// }
			if (isSelected) selectedDays++; // 如果选中，则增加计数

			// 创建当前日期的信息对象
			let listItem = {
				// num: i,
				// name: weekDays[wk], // 星期名称
				day: i,
				isToday: 'false',
				status: null,//986 可约 987 已约 988 完成了
				sxp_date: year + '-' + (month < 10 ? '0' + month : month) + '-' + (i < 10 ? '0' + i : i),
				week: weekDays[wk],
				can_pre_morning_nums: 0,
				can_pre_night_nums: 0,
				can_pre_noon_nums: 0,
				is_pre_morning_nums: 0,
				is_pre_night_nums: 0,
				is_pre_noon_nums: 0,
				morning_money: null,
				morning_nums: 0,
				night_money: 0,
				night_nums: 0,
				noon_money: 0,
				total_money: 0,
				total_nums: 0,
				// action: i == 8 || i == 9 || i == 10 || i == 11 || i == 12 ? true : false, // 特定日期的动作标记
				// actnum: i == 8 || i == 10 ? 1 : i == 9 || i == 11 ? 2 : i == 12 ? 3 : '', // 动作标记的数量
				// text: (year === currYear && month === currMonth && i === currDay) ? '今天' : '', // 如果是今天，显示“今天”
				selected: isSelected // 标记是否选中
			};
			dayListItem.push(listItem); // 添加到日历数组中
			wk++; // 星期数递增
		}
		let nlfirstDay = whichFirstDay == 0 ? 6 : Number(whichFirstDay) - 1;
		for (let i = 0; i < nlfirstDay; i++) {
			dayListItem.unshift({ space: true, num: '' });
		}
		let nlastDay = whichLastDay == 0 ? 0 : 7 - Number(whichLastDay);
		for (let i = 0; i < nlastDay; i++) {
			dayListItem.push({ space: true, num: '' });
		}
		// // 在月份的第一天之前添加空白let i = 0;
		// for (let i = 0; i < whichFirstDay; i++) {
		// 	dayListItem.unshift({ space: true, num: '' });
		// }

		// // 在月份的最后一天之后添加空白let i = 0;
		// let nlastDay = whichLastDay == 0 ? 6 : 7 - (Number(whichLastDay) + 1);
		// for (let i = 0; i < nlastDay; i++) {
		// 	dayListItem.push({ space: true, num: '' });
		// }

		// 判断是否有选中的日期
		let flag = selectedDays > 0; // 只要有至少一个选中的日期，flag 就为 true

		// console.log('dayListItem', dayListItem);
		console.log('flag', flag);

		// 根据日历的长度设置值
		dayListItem.length > 35 ? (filcalen.value = true) : (filcalen.value = false);
		calenList.value = dayListItem; // 更新状态中的日历数据
		// weekDays = weekDays; // 更新状态中的星期名称
	}

	//切换月份
	const prevMonth = () => {
		let current = new Date(curYear.value, curMonth.value - 1, 1);
		current.setMonth(current.getMonth() - 1);
		curYear.value = current.getFullYear();
		curMonth.value = current.getMonth() + 1;
		initCalenList(curYear.value, curMonth.value);
		console.log('curYear.value, curMonth.value-------------------------', curYear.value, curMonth.value)
	};

	const nextMonth = () => {
		let current = new Date(curYear.value, curMonth.value - 1, 1);
		current.setMonth(current.getMonth() + 1);
		curYear.value = current.getFullYear();
		curMonth.value = current.getMonth() + 1;
		initCalenList(curYear.value, curMonth.value);
		console.log('curYear.value, curMonth.value-------------------------', curYear.value, curMonth.value)
	};

	//选中日期
	const selectdate = (item : any, index : any) => {
		console.log('Item selected:', item);
		let rt = weekList.value[index].rangeTime || [];
		mealData.value = initCanDuan(rt);
		if (!item.selected) {
			let slcted = rt.some(sitem => sitem.setedTime);
			slcted ? item.selected = true : '';

		} else {
			weekClass.value==index?item.selected = false:'';
		}
		weekClass.value = index;
		// 如果需要更新 state.calenList，可以在这里添加逻辑
		// state.calenList[index] = item; // 这行代码视情况而定
	}
	const maskClick = (e : any) => {
		// console.log('car-maskClick',e);
		emit("maskClick")
	}
	const close = () => {
		atmeal.value.close()
	}

	const tapSure = () => {
		let rty : any = [];
		weekList.value.forEach(item => {
			if (item.selected) {
				let rlist = item.rangeTime || [];
				rlist.forEach(citem => {
					if (citem.setedTime) {
						props.source == 'appionted' ? rty.push({ rangeType: citem.id, rangeTime: citem.setedTime, seq: item.day }) : rty.push({ time_range_type: citem.id, time_range_time: citem.setedTime, seq: item.day });
					}
				})
			}
		})
		console.log('tapsure0', weekList.value)
		// let slist = weekList.value.filter(item => item.selected) || [], rty : any = [];

		// slist.forEach(item => {
		// 	let rlist = item.rangeTime || [];
		// 	rlist.forEach(citem => {
		// 		if (citem.setedTime) {
		// 			props.source == 'appionted' ? rty.push({ rangeType: citem.id, rangeTime: citem.setedTime, seq: item.day }) : rty.push({ time_range_type: citem.id, time_range_time: citem.setedTime, seq: item.day });
		// 		}
		// 	})
		// })
		console.log('tapsure11', rty)
		// let curtime = mealtime2.value[timeClass.value].name
		// let ntext = '每周'
		// mealtime1.value.forEach((item : any) => {
		// 	item.select ? ntext += item.name : ''
		// })
		emit("confirm", { list: rty })

		close()
	}
	//选择时间
	const showPop = (source : string) => {
		switch (source) {
			case 'propTime':
				propTime.value?.open('bottom');
				break;
			default:
				break;
		}
	}
	//获取当前时间
	const getDate = (type : 'start' | 'end' | 'current') : string => {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 2;
		} else if (type === 'end') {
			year = year + 2;
		}

		// 格式化月份和日期为两位数
		const formattedMonth = month > 9 ? month.toString() : '0' + month;
		const formattedDay = day > 9 ? day.toString() : '0' + day;

		return `${year}-${formattedMonth}-${formattedDay}`;
	};
	onLoad(() => {
		// const firstMeal = mealData.value[0];
		// firstMeal.setedTime = firstMeal.time[0].text;
		bindDateChange({ detail: { value: getDate('current') } })
		let current = new Date();
		curYear.value = current.getFullYear();
		curMonth.value = current.getMonth() + 1;
		// initCalenList(curYear.value, curMonth.value);
		// console.log('日历-----------1', calenList.value)
	})
	const bindDateChange = (e) => {
		date.value = e.detail.value
		console.log('time', e.detail.value);
		let time = e.detail.value.split('-')
		timeName.value = time[0] + '-' + parseInt(time[1]) + '-' + parseInt(time[2])
	}

	const startDate = computed(() => {
		return getDate('start')
	})

	const endDate = computed(() => {
		return getDate('end')
	})

	// const clearCar=()=>{
	// 	emit("changeTotal",getCartotal())
	// }
	defineExpose({ open, close, maskClick,rezData })
</script>

<style lang="scss" scoped>
	.checkmark {
		position: absolute;
		top: 8rpx;
		/* 调整位置 */
		left: 14rpx;
		/* 调整位置 */
		width: 12rpx;
		/* 勾的宽度 */
		height: 24rpx;
		/* 勾的高度 */
		border: solid #fff;
		/* 勾的颜色 */
		border-width: 0 4rpx 4rpx 0;
		/* 勾的边框样式 */
		transform: rotate(45deg) scale(0.6);
		/* 旋转并缩小 */
	}

	.padding-left-lgzdy {
		padding-left: 34rpx;
	}

	.seleIcon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		right: 5rpx;
		bottom: 5rpx;

		.fcon-xuanzhong {
			color: #fff;
			font-size: 12rpx;
			position: absolute;
			right: 10rpx;
			top: 15rpx;
			transform: rotate(-5deg);
		}
	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 30rpx solid transparent;
		border-bottom: 30rpx solid #D3D3D3;
		position: absolute;
	}

	.seleBgActive {
		border-bottom: 30rpx solid #53A87F !important;
	}

	.yyscrbx {
		width: 100%;
		height: 324rpx;
	}

	.yytips {
		position: absolute;
		width: 100%;
		height: 324rpx;
		flex-shrink: 0;
		z-index: 999;
		top: 135rpx; //-345
		left: 0rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

		.yytips_li {
			border-bottom: 1px solid #f2f2f2;
			padding: 0 20rpx;
			height: 106rpx;
			align-items: center;

			.fongStyle {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
			}
		}

		.yytips_li:last-child {
			border-bottom: none;
		}
	}

	.fcon-a-dsanjiao {
		font-size: 16rpx;
		color: #999;
		margin-left: 5;
	}

	.mcalendbx {
		// position: absolute;
		// left: 0;
		// top: 86rpx;
		border-radius: 20rpx;
		width: 100%;
		// background: rgba(235, 239, 251, 0.3);
		background-color: #FFF;
		z-index: 2;
		height: 0;
		overflow: hidden;

		&.week {
			height: 150rpx;
			// height: 360rpx;
		}

		.week_container {
			padding: 0 40rpx;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			margin-bottom: 28rpx;
		}

		.rote {
			display: inline-block;
			transform: rotate(-180deg);
		}

		.widthcur {
			width: 200rpx;
			margin: 44rpx auto;
		}

		.curMonth_style {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}

		&.lg {
			&.show {
				height: 582rpx;
			}

			.mcdbox {
				height: 582rpx;
			}
		}

		.mcdbox {
			// height: 488rpx;
			height: 582rpx;
			border-radius: 20rpx;
			// border: 1px solid rgba(153, 153, 153, 0.1);

		}

		&.show {
			// height: 520rpx;
			height: 582rpx;
			overflow: inherit;
			// transition: height 0.2s ease-out;
			// animation: anshow 0 ease-in-out 0.2s forwards;
			// animation: anshow 0,0.2s,1;
			// animation-fill-mode: forwards;
		}

		@keyframes anshow {
			from {
				overflow: hidden;
			}

			to {
				overflow: inherit;
			}
		}

		.mcitm {
			width: 14.28%;
			height: 60rpx;
			display: inline-block;
			margin-top: 20rpx;
			position: relative;
		}

		.tiipsnum {
			width: 26rpx;
			height: 26rpx;
			border-radius: 50%;
			background: #FF9B94;
			position: absolute;
			right: 10rpx;
			top: 0;
			color: #fff;
			font-size: 16rpx;
		}

		.mcsub {
			width: 60rpx;
			height: 60rpx;
			line-height: 61rpx;
			background: $color-white;
			color: #CFCFCF;
			border-radius: 50%;
			position: relative;

			&.act {
				:after {
					content: '';
					width: 52rpx;
					height: 52rpx;
					border-radius: 50%;
					position: absolute;
					left: -2rpx;
					top: -2rpx;
					border: 4rpx solid #4CDD97;
					box-shadow: 0px 0px 10rpx 0px rgba(93, 177, 117, 0.2);
					z-index: 1;
				}
			}

			&.wk {
				border: 1px solid #999;
				color: #666;
			}

			&.ngreen {
				// background: linear-gradient(138deg, #B8E4C0 14.11%, #83DD86 84.09%);
				background-color: #53A87F;
				color: #F8FFFB;
				border: 1px solid #53A87F;
			}
		}
	}

	// 选择时间
	.propTime {
		width: 100% !important;
		border-radius: 16rpx 16rpx 0 0;

		.belivery-title-time {
			padding: 40rpx 60rpx;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 40rpx;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
		}

		.popupTime-btn {
			padding: 0 40rpx;

			view {
				width: 300rpx;
				padding: 32rpx 64rpx;
				flex-shrink: 0;
				border-radius: 43px;
				background: #E7EAE8;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #666;
				text-align: center;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;

				&:nth-child(2) {
					background-color: #53A87F;
					color: #fff;
				}
			}
		}
	}

	.comBotBx {
		max-height: 96vh;
		min-height: 1074rpx;
		background-color: #fff !important;
	}

	.padding-tb {
		padding: 30px 46rpx 30rpx;
	}

	.padding-fb {
		padding-bottom: 30rpx;
	}

	.prpo-w {
		width: 712rpx;
		margin: 0 auto;
	}

	.marbittom {
		margin-bottom: 40rpx;
	}

	.mtitle {
		color: #333;
		font-size: 20px;
		font-weight: 700;
		line-height: 140%;
		/* 28px */
		letter-spacing: 0.6px;
		padding: 30rpx 26rpx;
	}

	.marbootomXs {
		margin-bottom: 20rpx;
	}

	.list-times {
		border-radius: 10px;
		background: #FFF;
		padding: 1rpx 30rpx;
		/* Drop card */
		// box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.10);

		.text-style {
			color: #333;
			font-size: 32rpx;
			font-weight: 400;
		}

		.list-times-title {
			height: 100rpx;
			background: linear-gradient(180deg, #E4FEEE 50%, #FFF 93.61%);
			color: #333;
			font-size: 32rpx;
			font-weight: 400;
			position: relative;
			padding-left: 60rpx;
			border-radius: 20rpx 20rpx 0 0;

			&:before {
				content: '';
				width: 6rpx;
				height: 30rpx;
				background: #53A87F;
				position: absolute;
				left: 34rpx;
			}
		}

		.text-canshu {
			color: #333;
			font-size: 32rpx;
			font-weight: 400;
			padding-left: 34rpx;
			padding-bottom: 30rpx
		}
	}

	//弹窗1-s
	.zm_itm {
		@include centBox(68rpx, 68rpx);
		border-radius: 50%;
		background: $base-color;
		margin: 20rpx 0 0 30rpx;

		&.kx {
			background: #fff;
			color: #999;
			border: 1px solid #999;
		}
	}

	.zm_slc {
		margin: 20rpx 40rpx 0 0;
		// margin-left: 0!important;
		// font-size: 24rpx;
		white-space: nowrap;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 306rpx;
		height: 90rpx;
		background: #F7F7F7;

		// box-sizing: border-box;
		// font-family: Microsoft YaHei, Helvetica Neue, Helvetica, sans-serif;
		&:nth-child(2n) {
			margin: 20rpx 0 0 0;
		}
	}

	.font_text {
		color: #999;
		font-family: "Microsoft YaHei UI";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 127.51%;
		/* 17.851px */
		margin-bottom: 15rpx;
	}

	.zdypadding {
		padding-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.zm_half {
		width: 704rpx;
		font-size: 32rpx;
		text-align: center;
		height: 88rpx;
		line-height: 89rpx;
		// box-shadow: 0px 10px 40px rgba(76, 162, 123, 0.26);
		border-radius: 16rpx;
		cursor: pointer;
		background: #fff;
		color: #999;
		border: 1px solid #999;

		&.bg {
			color: #fff;
			background: $view-act;
		}
	}

	.cuIcon-round {
		color: #999;
	}

	.cuIcon-roundcheckfill {
		color: $base-color;
	}

	//弹窗1-e
	.nav_time {
		width: 100%;
		height: 600rpx;
	}

	.nav_time .cu-items {
		width: 299rpx;
		height: 130rpx;
		padding-left: 36rpx;
		padding-top: 20rpx;
		// border-bottom: 4rpx solid #F5F5F5;
		position: relative;
		border-radius: 5px;
		background: #F7F7F7;
	}

	.rounded-bottom-triangle {
		width: 299rpx;
		height: 130rpx;
		// border-bottom: 4rpx solid #F5F5F5;
		position: relative;
		border-radius: 5px;
		background: #53A87F;
		position: relative;
		clip-path: polygon(100% 100%, 100% 0%, 0% 0%);
		/* 裁剪为右上角 */
	}

	.nav_time .cu-items.curHover {
		// border-bottom: 6rpx solid;
		// position: relative;
	}

	.padding-time {
		padding: 0 34rpx;
	}

	.uni-input-text {
		color: #333;
		font-size: 32rpx;
		font-weight: 400;
	}
</style>